<html>
<head>
<body>
<title>MemoryGame</title>
</head>
<style type='text/css'>.output {background-color: #fdffdd;}
body { background-image : url("http://i206.photobucket.com/albums/bb239/ginryuu_kurochan/Rain-on-the-sea.gif") }
#backgroundTable{border: 5px solid orange; margin: 0 auto; }
td {border: 5px solid black; line-height:2em;padding:2}
#rows {width:150px ; height:50px};
</style>
<h1 style = color:red><center>TOMAMAKAMEMORYGAMEAKAMAMOT</center></h1>

<table id = "backgroundTable"> 
		<tr id = "rows">
		<td> <img> </td> 
		<td> <img> </td> 
		<td> <img> </td> 
		<td> <img> </td> 
		</tr>
		
		<tr id = "rows">
		<td> <img> </td> 
		<td> <img> </td>
		<td> <img> </td> 
		<td> <img> </td> 
		</tr>
		
		<tr id = "rows">
		<td> <img> </td>
		<td> <img> </td>
		<td> <img> </td>
		<td> <img> </td>
		</tr>
		
		<tr id = "rows">
		<td> <img> </td>
		<td> <img> </td>
		<td> <img> </td>
		<td> <img> </td>
		</tr>
</table>


<script type='text/javascript'>
var counter = 0; var firstMatch = ""; var fMInx = 0;
var logoUrls = [ 
"http://www.kesar.org/fotos/15308.jpg", "http://www.webster.edu/~cschmitz/welcome/Philosophy/GettingImages/kenfan.jpg" ,
"http://news.filefront.com/wp-content/uploads/2007/05/ash_pika.jpg" ,
"http://fc05.deviantart.com/fs11/i/2006/234/7/1/NWC_ID_by_Naruto_Writing_Club.jpg",
"http://cdimg2.crunchyroll.com/i/spire4/03112008/7/3/5/4/7354afc5935bf0_full.jpg", "http://www.spincrus.com/blog/wp-content/uploads/2007/09/idnar-rukia.jpg",
"http://simplekizzer.blogsome.com/wp-admin/images/EYESHIELD_21_450X407.jpg", "http://i136.photobucket.com/albums/q186/erastale/Higurashi/Higurashi_rena.jpg"
];

var arrOfImg = document.getElementsByTagName("img");
  
function loadBGTable (){ 
for ( var x = 0 ; x<arrOfImg.length; x++){
  arrOfImg[x].src ="http://wiki.mtgsalvation.com/images/thumb/9/98/Color_wheel.jpg/350px-Color_wheel.jpg";
  arrOfImg[x].charsrc =logoUrls[x%8];
  arrOfImg[x].explsrc ="http://webtools.gieskes.nl/pages/images/explosion.gif";
  arrOfImg[x].width = "150";
  arrOfImg[x].height = "150";
  arrOfImg[x].onclick = flipImg;
  arrOfImg[x].index = x;
}
}
  
  function reloadBGTable (){ 
  var countArr = [];
  for (var y = 0; y<8; y++)
	countArr.push(0);
for ( var x = 0 ; x<16; x++) {
  if (x < 8 && arrOfImg[x].src == arrOfImg[x].explsrc) countArr[x] = countArr[x] + 1;
  if (x >= 8 && arrOfImg[x].src == arrOfImg[x].explsrc) countArr[x%8] = countArr[x%8] + 1; }
for ( var z = 0 ; z<16; z++)
  if (countArr[z%8] != 2) arrOfImg[z].src="http://wiki.mtgsalvation.com/images/thumb/9/98/Color_wheel.jpg/350px-Color_wheel.jpg";
  else arrOfImg[z].src=arrOfImg[z].explsrc;
  }


function flipImg(event) {
  counter = counter + 1;
  if (counter < 2) { event.target.src = event.target.charsrc; firstMatch = event.target.src; fMInx = event.target.index; }
  else if (counter == 2 && firstMatch == event.target.charsrc && fMInx != event.target.index) { event.target.src = event.target.charsrc; window.setTimeout('console.log("")', 1000); counter = 0; event.target.src = event.target.explsrc; for ( var z = 0 ; z<16; z++) if (arrOfImg[z].src == event.target.charsrc) arrOfImg[z].src = event.target.explsrc; }
  else { event.target.src=event.target.charsrc; window.setTimeout("necessary()", 1000); counter = 0; }
  }

function necessary() {

counter = 0; reloadBGTable();
}

loadBGTable();


</script>
<h5 style = color : blue , size : 16 >  Created by Thomas and Amaka </h5>
</body>
</html>